<template>
	<!-- <u-navbar title="查询分页列表" bgColor="#FBFBFF" :autoBack="true" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
	</u-navbar> -->
	<view class="baseForm">
		<!-- <scan-bar ref="scanBarRef" @code-scanned="getScanResult" class="scan-bar"></scan-bar> -->

		<!-- 选择设备 -->
		<view class="searchScan_div">
			<scan-bar
				ref="scanBarRef"
				placeholder="请扫描或输入耗材编号"
				@code-scanned="getScanResult"></scan-bar>
		</view>
		<view v-if="totals">
			<!-- 设备详情 -->
			<view class="card" v-if="taskInfo.id">
				<!-- 耗材详情 -->
				<ConsumablesInstallInfo
					v-if="taskInfo.id"
					:taskInfo="taskInfo"></ConsumablesInstallInfo>
				<view class="consumableCapacity">
					<view class="consumable_content">耗材内容</view>
					<view class="consumable_capacity">
						包装容量:
						<view class="capacity_number">
							{{ tableList.length }}
						</view>
					</view>
				</view>
				<uni-table
					v-if="taskInfo.id"
					ref="tableRef"
					stripe
					type="selection"
					selection-key="id"
					emptyText="暂无数据"
					@selection-change="selectionChange"
					class="unitable">
					<uni-tr>
						<uni-th width="90" align="center">耗材序列号</uni-th>
						<uni-th width="75" align="center">剩余寿命</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableList" :key="index">
						<uni-td align="center">{{ index + 1 }}</uni-td>
						<uni-td align="center">
							{{ (1 - Number(item.workLife)).toFixed(2) * 100 }}%
						</uni-td>
					</uni-tr>
				</uni-table>
				<view style="height: 30px"></view>
				<view class="submit_btn_div">
					<button
						type="primary"
						:disabled="postLoading"
						:loading="postLoading"
						@click="submit"
						class="submit_btn">
						立即提交
					</button>
				</view>
			</view>
			<view
				v-else
				class="flex justify-center font-14"
				style="margin: 30px 0 30px 0">
				暂无耗材信息，请录入耗材编号
			</view>
		</view>

		<!-- 空数据 -->
		<view v-else>
			<u-empty
				mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
	<u-back-top :scroll-top="scrollTop" top="200" mode="squery"></u-back-top>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, watch } from "vue";
import {
	onPageScroll,
	onPullDownRefresh,
	onShow,
	onBackPress,
} from "@dcloudio/uni-app";
import { onLoad } from "@dcloudio/uni-app";
import ScanBar from "@/components/scan-bar/index.vue";
import { http } from "@/utils/http";

import ConsumablesInstallInfo from "@/pages/eam/consumables/consumablesInstallation/components/info.vue";

// 监听页面到顶部距离
const scrollTop = ref(0);
//列表高度
const listHeight = ref("");
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});
onShow(async () => {
	// #ifdef H5
	listHeight.value = "calc(100vh - 88px)";
	// #endif

	// #ifdef APP-PLUS
	listHeight.value = "calc(100vh - 44px)";
	// #endif
});

let taskInfo = reactive({
	batchCode: "",
	batchNUm: "",
	createTime: "",
	createdUserId: "",
	createdUserName: "",
	deleted: "",
	enabled: "",
	equipCode: "",
	equipPosition: "",
	equipPositionId: "",
	id: "",
	ids: "",
	lastUpdateTime: "",
	lastUpdatedUserId: "",
	lastUpdatedUserName: "",
	materialCode: "",
	materialGroupCode: "",
	materialGroupName: "",
	materialId: "",
	materialName: "",
	productCode: "",
	usefulLife: "",
});
const formData = ref({
	consumeCode: "",
	csmBindEquipment: {},
	dataDTOS: [],
});
const tableList = ref([]);

const totals = ref(true);
// 安装位置选择

// 获取扫码结果
const code = ref("");
async function getScanResult(result: string) {
	code.value = result;
	jumpEquList(
		"/eam/consumables/consumablesInstallation/euqListSelect",
		result
	);
}

const getTableList = async (code) => {
	await http({
		method: "GET",
		url: `/eam/csmmaterialdata/getRecord/${code}`,
		data: {},
	}).then((res) => {
		tableList.value = res.data;
	});
};

const props = defineProps({
	result: {
		type: String,
		default: "",
	},
	code: {
		type: String,
		default: "",
	},
});
const scanBarRef = ref();
if (props.result && props.code) {
	const result = JSON.parse(props.result);
	formData.value.consumeCode = props.code;
	taskInfo = Object.assign(taskInfo, result);
	formData.value.csmBindEquipment = taskInfo;
	getTableList(taskInfo.materialId);
}

// onPullDownRefresh(() => {
// 	current.value = 0;
// 	materialReturnList.value = [];
// 	// getMaterialReturnList("refresh");
// });
// 跳转至详情页面
// function jumpToDetail(res: any) {
// 	uni.navigateTo({
// 		url: `/pages/produce/materialReturn/detail?result=${JSON.stringify(res)}`,
// 		animationDuration: 0
// 	});
// }

// 初始化参数
// function reset() {
// 	current.value = 0;
// 	materialReturnList.value = [];
// 	total.value = 0;
// 	totalPage.value = 0;
// }

// 跳转选择设备list页面
const jumpEquList = (item: any, id: string) => {
	console.log("id", id);
	if (id != "") {
		uni.navigateTo({
			url: id
				? `/pages${item}?id=${id}&code=${code.value}`
				: `/pages${item}`,
			fail: () => {
				uni.showToast({
					title: "请扫描条形码",
					icon: "error",
				});
			},
		});
	} else {
		uni.showToast({
			title: "请扫描条形码",
			icon: "error",
		});
	}
};

// 多选

function selectionChange(e) {
	console.log("e", e);

	if (e.detail.index.length) {
		let ids = [];
		e.detail.index?.map((i) => {
			ids.push(tableList.value[i]);
		});
		formData.value.dataDTOS = ids;
	} else {
		formData.value.dataDTOS = [];
	}
}
// 校验提交

const postLoading = ref(false);
const submit = async () => {
	if (formData.value.consumeCode == "") {
		uni.showToast({
			title: "请扫描耗材编码",
			icon: "none",
		});
		return;
	}
	if (formData.value.dataDTOS.length == 0) {
		uni.showToast({
			title: "请选择至少一个耗材",
			icon: "none",
		});
		return;
	}

	// if (!taskInfo.value.id) {
	// 	uni.showToast({
	// 		title: '请录入耗材编号',
	// 		icon: 'none'
	// 	});
	// 	return false;
	// }
	// if (!formData.value.detachIds.length) {
	// 	uni.showToast({
	// 		title: '请选择耗材',
	// 		icon: 'none'
	// 	});
	// 	return false;
	// }
	// uForm.value.validate().then(async () => {
	postLoading.value = true;
	await http({
		method: "POST",
		url: `/eam/csmmaterialdata/insert`,
		data: formData.value,
	})
		.then((res) => {
			console.log("提交的", formData.value);
			uni.showToast({
				title: "提交成功",
			});
			setTimeout(() => {
				postLoading.value = false;
				resetFields();
			}, 1000);
		})
		.finally(() => {
			postLoading.value = false;
		});
};

// 重置表单信息 & 光标自动blur

const datekey = ref(new Date());
function resetFields() {
	taskInfo.batchCode = "";
	taskInfo.batchNUm = "";
	taskInfo.createTime = "";
	taskInfo.createdUserId = "";
	taskInfo.createdUserName = "";
	taskInfo.deleted = "";
	taskInfo.enabled = "";
	taskInfo.equipCode = "";
	taskInfo.equipPosition = "";
	taskInfo.equipPositionId = "";
	taskInfo.id = "";
	taskInfo.ids = "";
	taskInfo.lastUpdateTime = "";
	taskInfo.lastUpdatedUserId = "";
	taskInfo.lastUpdatedUserName = "";
	taskInfo.materialCode = "";
	taskInfo.materialGroupCode = "";
	taskInfo.materialGroupName = "";
	taskInfo.materialId = "";
	taskInfo.materialName = "";
	taskInfo.productCode = "";
	taskInfo.usefulLife = "";
	formData.value.consumeCode = "";
	formData.value.csmBindEquipment = {};
	formData.value.dataDTOS = [];
	tableList.value = [];
	// uForm.value.resetFields();
	scanBarRef.value.reset();
	datekey.value = new Date();
}

onBackPress(() => {
	back1();
	return true;
});
const back1 = () => {
	uni.switchTab({
		url: "/pages/index/index",
	});
};
</script>

<style lang="scss" scoped>
.upload-scan {
	padding: 10px 40rpx;
}

.baseForm {
	background-color: #fbfbff;
	display: block;
	min-height: 100vh;
}

.list {
	// :deep(.uni-scroll-view) {
	// 	overflow: visible !important;
	// }
	.card {
		margin: $uni-page-padding;
		margin-top: 5px;
		margin-bottom: 5px;
		border-radius: 7px;
		display: flex;
		align-items: center;
		padding: 10px 0;
		transition: all 300ms ease;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

		.left {
			flex-basis: 90rpx;
			text-align: center;
			font-size: 13px;
			color: rgba(0, 0, 0, 0.5);
		}

		.right {
			.title {
				font-size: 15px;
				line-height: 20px;
				margin-bottom: 5px;
			}

			.body {
				color: rgba(238, 129, 48, 0.8);
				font-size: 13px;
				line-height: 18px;
			}
		}
	}
}

.u-list-item {
	margin: $uni-page-padding;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 7px;
	display: flex;
	align-items: center;

	transition: all 300ms ease;
	box-shadow: 0 1px 5px rgba(19, 11, 236, 0.13);
	background-color: #fff;
	display: flex;
	align-items: flex-start;

	.title {
		display: flex;

		.label {
			font-size: 14px;
			font-weight: 600;
			color: #101010;
		}

		.content {
			font-size: 14px;
		}
	}
}

.searchScan {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 36px;
	width: 95%;
	padding: 6px;

	.addBtn1 {
		width: 60px;
		height: 36px;

		:deep(.u-button__text) {
			font-size: 14px !important;
		}
	}
}
.submit_btn {
	z-index: 2;
	position: fixed;
	width: 95%;
	margin-left: 10px;
	bottom: 5px;
}

.unitable {
	width: calc(100% - 20px);
	margin: 0 10px 60rpx;
	box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
	border-radius: 4px;
}

.consumableCapacity {
	display: flex;
	padding: 5px 12px 5px 14px;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	.consumable_content {
		font-size: 14px;
		font-weight: 700;
	}
	.consumable_capacity {
		text-align: center;
		display: flex;
		font-size: 14px;
		font-weight: 700;
		.capacity_number {
			font-weight: 500;
			margin-left: 5px;
		}
	}
}
</style>
